<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">

	*{
		padding: 0;
		margin: 0;
	}
	body{

	}
	li{
		list-style: none;
	}
	.boxWrap{
		position: fixed;
		top: 50%;
		left: 2%;
		transform: translate(0, -50%);
		display:flex;
		flex-direction: column;
	}
	.floor{
		flex:1;
		color: #fff;
		margin-bottom: 1px;
		height: 50px;
		line-height:50px;
		background: #00CED1;
		width: 50px;
		text-align: center;
		cursor: pointer;
		display:none;
	}
	.subFloor{
		height: 1000px;
		background: #F0F0F0;
		color: #000;
	}
	.on{
		background: orange;
	}
	.cf1{
		background: #7FFFD4;
	}
	.cf2{
		background: #87CEFA;
	}
	.cf3{
		background: #EE9A49;
	}
	.cf4{
		background: #DA70D6;
	}
	.cf5{
		background: #EEEE00;
	}
	.subFloor{
		color: #fff;
	}
</style>
</head>
<body>
	<div class="boxWrap">
	    <div class="floor on" data-floor="1">1F</div>
	    <div class="floor" data-floor="2">2F</div>
	    <div class="floor" data-floor="3">3F</div>
	    <div class="floor" data-floor="4">4F</div>
	    <div class="floor" data-floor="5">5F</div>
	</div>
	<div class="fixFloor">
	    <ul class="cf">
	        <li class="subFloor cf1 active"><p class="floorNum">1F</p><p class="floorExpression bg_blue">商家</p></li>
	        <li class="subFloor cf2"><p class="floorNum">2F</p><p class="floorExpression bg_pink">类目</p></li>
	        <li class="subFloor cf3"><p class="floorNum">3F</p><p class="floorExpression bg_red">热门</p></li>
	        <li class="subFloor cf4"><p class="floorNum">4F</p><p class="floorExpression bg_black">资讯</p></li>
	        <li class="subFloor cf5"><p class="floorNum">5F</p><p class="floorExpression bg_green">服务</p></li>
	    </ul>
	</div>
</body>
<script src='jquery-1.11.3.min.js'></script>
<script type="text/javascript">
	$(function(){
		var floors=$('.floor');//获取楼层导航
		var floorBox=$('.subFloor');//获取楼层内容

		floors.on('click',scrollMove)//给导航绑定事件

		$(window).scroll(function(){//监听滚动条
			var scrTop= $(window).scrollTop();//获取滚动条位置

			if(scrTop>=100) floors.show(100);
			else floors.hide(100);
			changeNav(floors,floorBox,scrTop);
		})
	})

	function scrollMove(){//移动滚动条到指定元素位置
		var floors=$('.subFloor');
		var index=$(this).index();//获取当前下标
	 	$("html,body").animate({scrollTop:floors[index].offsetTop+"px"},1000);
	 	if($(window.scrollTop()==floors[index].offsetTop)){
	 		$(this).addClass('on').siblings().removeClass('on');
	 	} 	
	}

	function changeNav(floornav,subfloor,scrTop){
		var floorsTop=[];
		subfloor.each((ind,val)=>{
			floorsTop.push(val.offsetTop);
		})
		floorsTop.forEach((val,ind)=>{
			if(val-scrTop<=0){
				$(floornav[ind]).addClass('on').siblings().removeClass('on');
			}
		})
	}

	//判断当前元素是否在可视区域
	// js xx.offsetTop(元素距离文档顶端的高度)-document.documentElement.scrollTop(页面卷起的高度即滚动条距离顶端的高度)<=0
	// jquery xx.offset().top -$(window).scrollTop() 
</script>
</html>